<template>
    <div class="s1">
        <h1>{{ msg }}</h1>
        <h3>姓名：{{ name }}</h3>
        <h3>年龄：{{ age }}</h3>
    </div>
</template>

<script>

export default {
    name: 'Vip',
    data() {
        return {
            msg: '会员信息',
            name: '李四',
            age: 18
        }
    },
}
</script>

<!-- scoped 表示局部的，当前的style只针对当前的组件服务，所以当主组件引入多个子组件的时候，即使出现相同的css也不会冲突 -->
<style scoped>
.s1 {
    background-color: bisque;
}
</style>